<template>
    <div v-if="detailsVisible">
        <BreadcrumbA></BreadcrumbA>
        <div style="width:100%; height: 100px; background: #b40909;">
            <div style="float: left; line-height: 100px;   font-size: 50px;   font-weight: bold;  color: yellow;  font-family: cursive;  width: 730px;"><img
                    src="../../images/danghui.png" style="width:70px;height:70px;margin-top: -10px;  margin-left: 10px; margin-right: 10px;">电子党务系统</div>
            <div style="float: right; "><img src="../../images/flat-avatar.png" style="float: right;width:70px;height:70px;margin-top: 10px; margin-right: 30px;"></div>
        </div>
        <div class="leftitem">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="党员人数统计"><img src="../../images/hongqi.png" style="width:45px;height:45px; margin-right: 10px;">党员人数统计</el-menu-item>
                <el-menu-item index="党费统计"><img src="../../images/hongqi.png" style="width:45px;height:45px; margin-right: 10px;">党费统计</el-menu-item>
                 <el-menu-item index="积极分子统计"><img src="../../images/hongqi.png" style="width:45px;height:45px; margin-right: 10px;">积极分子统计</el-menu-item>
                <el-menu-item index="预备党员统计"><img src="../../images/hongqi.png" style="width:45px;height:45px; margin-right: 10px;">预备党员统计</el-menu-item>
                 <el-menu-item index="博爱一日捐统计"><img src="../../images/hongqi.png" style="width:45px;height:45px; margin-right: 10px;">博爱一日捐统计</el-menu-item>
                <el-menu-item index="党员帮扶统计"><img src="../../images/hongqi.png" style="width:45px;height:45px; margin-right: 10px;">党员帮扶统计</el-menu-item>
                </el-menu>
        </div>
        <div class="rightitem">
            <el-row v-if="showperson==true">
                <person ref='person'></person>
            </el-row>
            <el-row v-if="showdangfei==true">
                <dangfei ref='dangfei'></dangfei>
            </el-row>
            <el-row v-if="showjijifenzi==true">
                <jijifenzi ref='jijifenzi'></jijifenzi>
            </el-row>
            <el-row v-if="showyubeidangyuan==true">
                <yubeidangyuan ref='yubeidangyuan'></yubeidangyuan>
            </el-row>
            <el-row v-if="showboaiyiri==true">
                <boaiyiri ref='boaiyiri'></boaiyiri>
            </el-row>
            <el-row v-if="showdangyuanbangfu==true">
                <dangyuanbangfu ref='dangyuanbangfu'></dangyuanbangfu>
            </el-row>
        </div>

    </div>
</template>
<script>
    import Common from "../../js/Common.js";
    import {mapActions} from 'vuex';
    export default {
        data: () => ({
            detailsVisible: true,
            activeIndex: '党员人数统计',
            showAdd: false,

            showperson: false,
            showdangfei: false,
            showjijifenzi: false,
            showyubeidangyuan: false,
             showboaiyiri: false,
              showdangyuanbangfu: false,
           
            menuIndexRightitem: [{
                value: 'showperson',
                name: '党员人数统计'
            }, {
                value: 'showdangfei',
                name: '党费统计'
            }, {
                value: 'showjijifenzi',
                name: '积极分子统计'
            },
            {
                value: 'showyubeidangyuan',
                name: '预备党员统计'
            },
             {
                value: 'showboaiyiri',
                name: '博爱一日捐统计'
            },
             {
                value: 'showdangyuanbangfu',
                name: '党员帮扶统计'
            },],


            //面包屑
            showjulink: false,
            showdwlink: false,


        }),
        components: {
            person: function (resolve) {
                require(["./person.vue"], resolve);
            },
            dangfei: function (resolve) {
                require(["./dangfei.vue"], resolve);
            },
            jijifenzi: function (resolve) {
                require(["./jijifenzi.vue"], resolve);
            },
             yubeidangyuan: function (resolve) {
                require(["./yubeidangyuan.vue"], resolve);
            },
             boaiyiri: function (resolve) {
                require(["./boaiyiri.vue"], resolve);
            },
             dangyuanbangfu: function (resolve) {
                require(["./dangyuanbangfu.vue"], resolve);
            },
           
        },
        mounted() {
            Common.Config.this = this;
            if (this.GetUser() == false) {
                this.$router.push("/");
            }
            this.GetActiveDwId_DzbId();
            if (this.$store.state.Dw_DzbID.dwid == -1) {
                if (this.$store.state.user.operation == 0) {
                    this.showAdd = true;
                }
            } else if (this.$store.state.Dw_DzbID.dzbid == -1) {
                if (this.$store.state.user.operation <= 1) {
                    this.showAdd = true;
                }
            } else if (this.$store.state.Dw_DzbID.dzbid > -1 && this.$store.state.Dw_DzbID.dzbid > -1) {
                if (this.$store.state.user.operation <= 2) {
                    this.showAdd = true;
                }
            }
            if (this.$route.params) {
                if (this.$route.params.name) {
                    this.activeIndex = this.$route.params.name;
                    this.handleSelect(this.activeIndex);
                }
            }
            if (this.$store.state.user.operation == 0) {
                this.showjulink = true;
                this.showdwlink = true;
            }
            if (this.$store.state.user.operation == 1) {
                this.showdwlink = true;
            }









        },
        watch: {
            showperson: function (n) {
                if (n == true) {
                    let _this = this;
                    setTimeout(function () {
                        _this.$refs.person.$data.detailsVisible = true;
                    }, 100)
                }
            },
            showdangfei: function (n) {
                if (n == true) {
                    let _this = this;
                    setTimeout(function () {
                        _this.$refs.dangfei.$data.detailsVisible = true;
                    }, 100)
                }
            },
            showjijifenzi: function (n) {
                if (n == true) {
                    let _this = this;
                    setTimeout(function () {
                        _this.$refs.jijifenzi.$data.showAdd = _this.showAdd;
                        _this.$refs.jijifenzi.$data.detailsVisible = true;
                    }, 100)
                }
            },


            showyubeidangyuan: function (n) {
                if (n == true) {
                    let _this = this;
                    setTimeout(function () {
                        _this.$refs.yubeidangyuan.$data.showAdd = _this.showAdd;
                    }, 100)
                }
            },
            showboaiyiri: function (n) {
                if (n == true) {
                    let _this = this;
                    setTimeout(function () {
                        _this.$refs.boaiyiri.$data.showAdd = _this.showAdd;
                    }, 100)
                }
            },
            showdangyuanbangfu: function (n) {
                if (n == true) {
                    let _this = this;
                    setTimeout(function () {
                        _this.$refs.dangyuanbangfu.$data.showAdd = _this.showAdd;
                    }, 100)
                }
            },
           

        },
        methods: {
            ...mapActions(['GetUser', 'GetActiveDwId_DzbId']),
            handleSelect(key) {
                this.FromIndexAndShowRight(key);
            },
            FromIndexAndShowRight(key) {
                let ThatOk = this.menuIndexRightitem.filter(function (value) {
                    return value.name == key;
                });
                let ThatNotOk = this.menuIndexRightitem.filter(function (value) {
                    return value.name != key;
                });
                for (let index = 0; index < ThatOk.length; index++) {
                    let element = ThatOk[index];
                    this[element.value] = true;
                }
                for (let index2 = 0; index2 < ThatNotOk.length; index2++) {
                    let element2 = ThatNotOk[index2];
                    this[element2.value] = false;
                }
            },
        }
    }
</script>
<style scope>
    .leftitem {
        float: left;
        margin-bottom: 0;
        margin-right: 10px;
        height: 100%;
        padding: 0;
        position: relative;
        margin: 0 0 15px;

    }

    .rightitem {
        overflow: hidden;
        position: relative;
        margin: 0;
        padding: 0;
        padding-left: 5px;
    }

    .el-menu-demo {
        height: 900px;
        background: #e0e0e0;
        color: white;
        width: 230px;
        font-size: 14px;
    }

    .el-breadcrumb__inner {

        color: #fff;
    }

    .link {
        color: #fff;
    }

    .el-menu-item {
        font-size: 18px;
    }

    .el-breadcrumb__inner {

        color: #fff;
    }

    .link {
        color: #fff;
    }

    .el-menu-item {
        font-size: 18px;
    }
</style>